<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 95vh;" show-compass :show-location='true' :latitude="latitude"
					:longitude="longitude" :markers="covers" :polyline='polyline' @markertap="show">
				</map>
				<view class="gpsInfo">
					<text @click="toSeleGps">{{gpsText}}</text>
					<image @click="togps" style="width: 60rpx;height: 60rpx;margin-right: 40rpx;"
						src="../../static/icon/导航.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	var QQMapWX = require('../../utils/qqmap-wx-jssdk');
	var qqmapsdk = new QQMapWX({
		key: 'XTBBZ-JWZ2I-2XLGT-U2EYD-L6R4Z-5WFAD' // 必填
	});
	export default {
		data() {
			return {
				gpsText: '',
				// 经度
				latitude: 34.74821,
				//维度
				longitude: 113.61332,
				// id: 0, // 使用 marker点击事件 需要填写id
				// latitude: 39.909,
				// longitude: 116.39742,
				covers: [{
						id: 1,
						latitude: 39.909,
						longitude: 116.39742,
						width: 40,
						height: 40,
						iconPath: '../../static/icon/wxb定位.png',
						callout: {
							content: '',
							fontSize:'20',
							bgColor: '#75fbfd',
							color: '#949cf8',
							display: 'BYCLICK'
						}
					}
				]

			}
		},
		onLoad() {
			let that = this
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					// console.log(res);
					// console.log('当前位置的经度：' + res.longitude);
					// console.log('当前位置的纬度：' + res.latitude);
					that.longitude = res.longitude
					that.latitude = res.latitude
					that.covers[0].longitude = res.longitude
					that.covers[0].latitude = res.latitude

					//地址解析	
					qqmapsdk.reverseGeocoder({
						//传参
						location: {
							latitude: that.latitude,
							longitude: that.longitude
						},
						success(suc) {
							// console.log('地址解析==>', suc);
							that.gpsText = suc.result.address
							that.covers[0].callout.content = suc.result.address
						},
						fail(err) {
							console.log('错误信息==>', err);
						}
					})



				},
				fail: function(err) {
					console.log('err==>', err);
				}

			});
			// console.log(222);
		},
		methods: {
			//跳转选择地图点
			toSeleGps() {
				let that = this
				console.log('跳转选择地图点');
				uni.chooseLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success(suc) {
						// console.log('地图选点成功事件==>', suc);
						that.longitude = suc.longitude
						that.latitude = suc.latitude
						that.covers[0].latitude = suc.latitude
						that.covers[0].longitude = suc.longitude
					},
					fail(err) {
						console.log('地图选点失败');
					}
				})
			},
			//导航
			togps() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					address: this.gpsText,
				})
			},
			show() {
				this.covers[0].callout.display == 'BYCLICK' ? this.covers[0].callout.display = 'ALWAYS' : this
					.covers[0]
					.callout.display = 'BYCLICK'
			}
		}
	}
</script>

<style>
	.gpsInfo {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 5vh;
		line-height: 5vh;
	}
</style>